<template>
  <div class="liteflow-editor-setting-bar">
    <div class="setting-bar-header">
      <h3>属性设置</h3>
    </div>
    <div class="setting-bar-content">
      <div v-if="selectedNode" class="node-properties">
        <h4>节点属性</h4>
        <div class="property-group">
          <label class="property-label">节点ID</label>
          <input 
            v-model="nodeId" 
            class="property-input" 
            placeholder="请输入节点ID"
            @input="handleNodeIdChange"
          />
        </div>
        
        <div class="property-group">
          <label class="property-label">节点标签</label>
          <input 
            v-model="nodeTag" 
            class="property-input" 
            placeholder="请输入节点标签"
            @input="handleNodeTagChange"
          />
        </div>
        
        <div class="property-group">
          <label class="property-label">节点类型</label>
          <div class="property-value">{{ selectedNodeType }}</div>
        </div>
      </div>
      
      <div v-else class="no-selection">
        <p>请选择一个节点来查看属性</p>
      </div>
    </div>
  </div>
</template>

<script>
import { Graph } from '@antv/x6';

export default {
  name: 'SettingBar',
  props: {
    flowGraph: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      selectedNode: null,
      nodeId: '',
      nodeTag: '',
      selectedNodeType: ''
    };
  },
  mounted() {
    this.initGraphListeners();
  },
  beforeDestroy() {
    this.removeGraphListeners();
  },
  methods: {
    initGraphListeners() {
      if (this.flowGraph) {
        this.flowGraph.on('cell:selected', this.handleNodeSelected);
        this.flowGraph.on('cell:unselected', this.handleNodeUnselected);
        this.flowGraph.on('settingBar:forceUpdate', this.updateProperties);
      }
    },
    removeGraphListeners() {
      if (this.flowGraph) {
        this.flowGraph.off('cell:selected', this.handleNodeSelected);
        this.flowGraph.off('cell:unselected', this.handleNodeUnselected);
        this.flowGraph.off('settingBar:forceUpdate', this.updateProperties);
      }
    },
    handleNodeSelected({ cell }) {
      if (cell.isNode()) {
        this.selectedNode = cell;
        this.updateProperties();
      }
    },
    handleNodeUnselected() {
      this.selectedNode = null;
      this.clearProperties();
    },
    updateProperties() {
      if (this.selectedNode) {
        const data = this.selectedNode.getData();
        if (data && data.model) {
          const properties = data.model.getProperties();
          this.nodeId = properties.id || '';
          this.nodeTag = properties.tag || '';
          this.selectedNodeType = data.model.type || '';
        }
      }
    },
    clearProperties() {
      this.nodeId = '';
      this.nodeTag = '';
      this.selectedNodeType = '';
    },
    handleNodeIdChange() {
      if (this.selectedNode) {
        const data = this.selectedNode.getData();
        if (data && data.model) {
          data.model.setProperties({ id: this.nodeId });
          this.flowGraph.trigger('model:change');
        }
      }
    },
    handleNodeTagChange() {
      if (this.selectedNode) {
        const data = this.selectedNode.getData();
        if (data && data.model) {
          data.model.setProperties({ tag: this.nodeTag });
          this.flowGraph.trigger('model:change');
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.liteflow-editor-setting-bar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.setting-bar-header {
  padding: 16px;
  border-bottom: 1px solid #d9d9d9;
  
  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
}

.setting-bar-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.node-properties {
  h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 500;
    color: #666;
  }
}

.property-group {
  margin-bottom: 16px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.property-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #666;
}

.property-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 12px;
  color: #333;
  background: #fff;
  transition: all 0.2s;
  
  &:focus {
    outline: none;
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }
  
  &::placeholder {
    color: #ccc;
  }
}

.property-value {
  padding: 6px 8px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
  background: #fafafa;
}

.no-selection {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #999;
  font-size: 14px;
  text-align: center;
}
</style> 